<template>
  <div v-cloak class="aui-wrapper aui-page__login">
    <div class="aui-content__wrapper">
      <main class="aui-content">
        <div class="login-header">
          <h2 class="login-brand">WMS管理系统 </h2>
        </div>
        <div class="login-body">
          <h3 class="login-title">登录</h3>
          <el-form :model="dataForm"
                   ref="dataFormRef"
                   :rules="dataRule"
                   @keyup.enter.native="dataFormSubmitHandle('dataFormRef')"
                   status-icon>
            <!--
              <el-form-item>
                <el-select v-model="$i18n.locale" class="w-percent-100">
                  <el-option v-for="(val, key) in $i18n.messages" :key="key" :label="val._lang" :value="key"></el-option>
                </el-select>
              </el-form-item>
               -->
            <el-form-item prop="username">
              <el-input
                  v-model="dataForm.username"
                  placeholder="用户名">
                <span slot="prefix" class="el-input__icon">
                  <svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-user"></use></svg>
                </span>
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input v-model="dataForm.password" type="password" placeholder="密码">
                <span slot="prefix" class="el-input__icon">
                  <svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-lock"></use></svg>
                </span>
              </el-input>
            </el-form-item>
            <!--
            <el-form-item prop="captcha">
              <el-row :gutter="20">
                <el-col :span="14">
                  <el-input v-model="dataForm.captcha" :placeholder="$t('login.captcha')">
                    <span slot="prefix" class="el-input__icon">
                      <svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-safetycertificate"></use></svg>
                    </span>
                  </el-input>
                </el-col>
                <el-col :span="10" class="login-captcha">
                  <img :src="captchaPath" @click="getCaptcha()">
                </el-col>
              </el-row>
            </el-form-item>
             -->
            <el-form-item>
              <el-button type="primary" @click="dataFormSubmitHandle('dataFormRef')" class="w-percent-100">登录
              </el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="login-footer">
          <!--
            <p>
              <a href="https://demo.renren.io/security-enterprise-general" target="_blank">{{ $t('login.demo') }}</a>
            </p>
            <p><a href="https://www.renren.io/" target="_blank">{{ $t('login.copyright') }}</a>2018 © renren.io</p>
           -->
        </div>
      </main>
    </div>
  </div>
</template>

<script>
// import { getCodeImg } from "@/api/login";
//import Cookies from "js-cookie";
//
//
// import { encrypt, decrypt } from '@/utils/jsencrypt'

//import i18n from "vue-i18n"

import {ref, reactive, unref, toRefs, onMounted, getCurrentInstance} from 'vue';

import {useRouter} from 'vue-router'
import {login} from '@/network/login'
import {ElMessage, ElMessageBox} from 'element-plus'
import store from 'vuex'

export default {
  name: "Login",

  setup(props, context) {
    const captchaPath = ref('');
    const router = useRouter();
    const dataForm = reactive(
        {
          username: '',
          password: '',
          captcha: ''
        }
    )
    const dataRule = reactive({
      username: [{required: true, message: "用户名不能为空", trigger: 'blur'}],
      password: [{required: true, message: "密码不能为空", trigger: 'blur'}],
      captcha: [{required: true, message: "验证码不能为空", trigger: 'blur'}]
    })

    const CurrentInstance = getCurrentInstance();

    const dataFormSubmitHandle = (dataFormRef) => {


      let form = CurrentInstance.refs[dataFormRef];
      form.validate(valid => {
        if (!valid) {

          return false;
        } else {

          login(dataForm).then((res) => {
                if (res.msg == 'success') {
                  router.push('/index/home')
                }else{
					ElMessage.error(res.msg)
				}
              }
          )
          /*store.dispatch("Login", dataForm).then(() => {
            router.push('/index').catch(() => {
            });
          }).catch(() => {
            // loading = false;
          });*/
        }
      })
      // alert("验证完成");
      // this.$http.post('/login', this.dataForm).then(function (res) {
      //   if (res.data.code !== 0) {
      //    // this.getCaptcha();
      //     return this.$message.error(res.data.msg);
      //   }
      //   router.push('/index')
      // }).catch(function () {});
      // router.push('/index')
    }

    return {
      captchaPath,
      router,
      dataRule,
      dataForm,
      dataFormSubmitHandle,

      CurrentInstance
    }

  },

  // data() {
  //   return {
  //     //  codeUrl: "",
  //     //  cookiePassword: "",
  //     captchaPath: '',
  //     dataForm: {
  //       username: '',
  //       password: '',
  //       captcha: ''
  //     },
  //     dataRule: {
  //       username: [
  //         {required: true, message: "用户名不能为空", trigger: 'blur'}
  //       ],
  //       password: [
  //         {required: true, message: "密码不能为空", trigger: 'blur'}
  //       ],
  //       code: [{required: true, message: "验证码不能为空", trigger: 'blur'}]
  //     },
  //   };
  // },
  // watch: {
  //  '$i18n.locale': 'i18nHandle'
  // },
  // beforeCreate: function () {
  //   vm = this;
  // },
  // created: function () {
  //   if (self !== top) {
  //     window.parent.location.href = 'login.html';
  //     return false;
  //   }
  //  // this.i18nHandle(this.$i18n.locale);
  //  // vm.getCaptcha();
  // },
  // methods: {
  //   i18nHandle: function (val) {
  //     Cookies.set('language', val);
  //     document.querySelector('html').setAttribute('lang', val);
  //     document.title = vm.$i18n.messages[val].brand.lg;
  //   },
  //   dataFormSubmitHandle() {
  //     alert("登录")
  //     let router = useRouter();
  //     router.push({path: '/index'})

//       this.$refs['dataForm'].validate(valid=> {
//           if (!valid) {
//             return false;
//           }
//           // this.$http.post('/login', this.dataForm).then(function (res) {
//           //   if (res.data.code !== 0) {
//           //     vm.getCaptcha();
//           //     return vm.$message.error(res.data.msg);
//           //   }
//           //   window.location.href = 'index.html';
//           // }).catch(function () {});
//
//
// /*
//         if (valid) {
//           this.loading = true;
//           if (this.loginForm.rememberMe) {
//             Cookies.set("username", this.loginForm.username, { expires: 30 });
//             Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
//             Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
//           } else {
//             Cookies.remove("username");
//             Cookies.remove("password");
//             Cookies.remove('rememberMe');
//           }
//           this.$store.dispatch("Login", this.loginForm).then(() => {
//             this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
//           }).catch(() => {
//             this.loading = false;
//             // this.getCode();
//           });
//         }*/
//
//
//
//
//         })
//     }
//   }
}

// (function () {
//   var vm = window.vm = new Vue({
//     el: '.aui-wrapper',
//     i18n: window.SITE_CONFIG.i18n,
//     data: function () {
//       return {
//         captchaPath: '',
//         dataForm: {
//           username: '',
//           password: '',
//           captcha: ''
//         }
//       }
//     },
//     computed: {
//       dataRule: function () {
//         return {
//           username: [
//             { required: true, message: vm.$t('validate.required'), trigger: 'blur' }
//           ],
//           password: [
//             { required: true, message: vm.$t('validate.required'), trigger: 'blur' }
//           ]
//           //,
//           //  captcha: [
//           //   { required: true, message: vm.$t('validate.required'), trigger: 'blur' }
//           // ]
//         }
//       }
//     },
//     watch: {
//       '$i18n.locale': 'i18nHandle'
//     },
//     beforeCreate: function () {
//       vm = this;
//     },
//     created: function () {
//       if (self !== top) {
//         window.parent.location.href = 'login.html';
//         return false;
//       }
//       vm.i18nHandle(vm.$i18n.locale);
//       vm.getCaptcha();
//     },
//     methods: {
//       // 国际化
//       i18nHandle: function (val) {
//         Cookies.set('language', val);
//         document.querySelector('html').setAttribute('lang', val);
//         document.title = vm.$i18n.messages[val].brand.lg;
//       },
//       // 获取验证码
//       getCaptcha: function () {
//         vm.captchaPath = window.SITE_CONFIG['apiURL'] + '/captcha?t=' + new Date().getTime();
//       },
//       // 表单提交
//       dataFormSubmitHandle: _.debounce(function () {
//         vm.$refs['dataForm'].validate(function (valid) {
//           if (!valid) {
//             return false;
//           }
//           vm.$http.post('/login', vm.dataForm).then(function (res) {
//             if (res.data.code !== 0) {
//               vm.getCaptcha();
//               return vm.$message.error(res.data.msg);
//             }
//             window.location.href = 'index.html';
//           }).catch(function () {});
//         })
//       }, 1000, { 'leading': true, 'trailing': false })
//     }
//   });
// })();

/*

export default {
  name: "Login",
  data() {
    return {
      codeUrl: "",
      cookiePassword: "",
      loginForm: {
        username: "admin",
        password: "admin123",
        rememberMe: false,
        code: "",
        uuid: ""
      },
      loginRules: {
        username: [
          { required: true, trigger: "blur", message: "用户名不能为空" }
        ],
        password: [
          { required: true, trigger: "blur", message: "密码不能为空" }
        ],
        code: [{ required: true, trigger: "change", message: "验证码不能为空" }]
      },
      loading: false,
      redirect: undefined
    };
  },
  watch: {
    $route: {
      handler: function(route) {
      //  this.redirect = route.query && route.query.redirect;
      },
      immediate: true
    }
  },
  created() {
    // this.getCode();
    this.getCookie();
  },
  methods: {
    // getCode() {
    //   getCodeImg().then(res => {
    //     this.codeUrl = "data:image/gif;base64," + res.img;
    //     this.loginForm.uuid = res.uuid;
    //   });
    // },
    getCookie() {
      const username = Cookies.get("username");
      const password = Cookies.get("password");
      const rememberMe = Cookies.get('rememberMe')
      this.loginForm = {
        username: username === undefined ? this.loginForm.username : username,
        password: password === undefined ? this.loginForm.password : decrypt(password),
        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
      };
    },
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true;
          if (this.loginForm.rememberMe) {
            Cookies.set("username", this.loginForm.username, { expires: 30 });
            Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
            Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
          } else {
            Cookies.remove("username");
            Cookies.remove("password");
            Cookies.remove('rememberMe');
          }
          this.$store.dispatch("Login", this.loginForm).then(() => {
            this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
          }).catch(() => {
            this.loading = false;
            // this.getCode();
          });
        }
      });
    }
  }
};*/
</script>

<style lang="scss" >
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-image: url("../assets/img/login_bg.jpg");
  background-size: cover;
}

.title {
  margin: 0px auto 30px auto;
  text-align: center;
  color: #707070;
}

.login-form {
  border-radius: 6px;
  background: #ffffff;
  width: 400px;
  padding: 25px 25px 5px 25px;

  .el-input {
    height: 38px;

    input {
      height: 38px;
    }
  }

  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 2px;
  }
}

.login-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}

.login-code {
  width: 33%;
  height: 38px;
  float: right;

  img {
    cursor: pointer;
    vertical-align: middle;
  }
}

.el-login-footer {
  height: 40px;
  line-height: 40px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: Arial;
  font-size: 12px;
  letter-spacing: 1px;
}

.login-code-img {
  height: 38px;
}
</style>
